<template>
  <div class="maincontain">
    <div class="head">
      <div class="left">
        <span>工单编号:</span>
        <el-input v-model.number="input" placeholder="请输入内容"></el-input>
      </div>
      <div class="right">
        <span>工单状态:</span>
         <el-select v-model="select" slot="prepend" placeholder="请选择">
           <el-option label="全部" value="0"></el-option>
                <el-option label="代办" value="1"></el-option>
                  <el-option label="进行" value="2"></el-option>
                    <el-option label="取消" value="3"></el-option>
                      <el-option label="完成" value="4"></el-option>
            </el-select>
      </div>
      <div class="button">
         <el-button type="primary" icon="el-icon-search" @click="stateSearch">查询</el-button>
      </div>
    </div>
    <div class="body">
      <div class="top">
        <el-button type="primary" icon="el-icon-zoom-in"  @click="xinjian('xinzeng')">新建</el-button>
       
      </div>
      <div class="contain">
           <el-table
      v-loading="loading"     
    :data="list"
    style="width: 100%"
    height="620"
    :stripe = false
    :border = false
    >
   
    <el-table-column
      fixed
     type='index'
      label="序号"
      width="80"
     
      >
      
    </el-table-column>
    <el-table-column
      prop="taskCode"
      label="工单编号"
      width="220">
    </el-table-column>
    <el-table-column
      prop="innerCode"
      label="设备编号"
      width="215">
    </el-table-column>
    <el-table-column
      prop="taskType.typeName"
      label="工单类型"
      width="215">
    </el-table-column>
    <el-table-column
      prop="taskStatusTypeEntity.statusName"
      label="工单方式"
      width="215">
    </el-table-column>
    <el-table-column
      prop="taskStatusTypeEntity.statusName"
      label="工单状态"
      width="215">
    </el-table-column>
     <el-table-column
      prop="userName"
      label="运营人员"
      width="215">
    </el-table-column>
     <el-table-column
      prop="createTime"
      label="创建日期"
      width="170">
    </el-table-column>
     <el-table-column
      prop="zip"
      label="操作"
      width="100">
         <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
          <div class="foot" v-if="isshow">
              <span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span>
                <el-button type="info" @click="nextPage">下一页</el-button>
                 <el-button type="info"   @click="beforePage">上一页</el-button>
          </div>
      </div>
    </div>
   <!-- 模态框 新增工单 -->
     <el-dialog
  title="新增工单"
  :visible.sync="dialogVisible"
  width="30%"
 >
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
  <el-form-item label="设备编号" prop="innerCode">
    <el-input v-model="ruleForm.innerCode" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="工单类型" prop="productType">
    <el-select v-model="ruleForm.productType" placeholder="请选择">
      <el-option :label='item.typeName' :value="item.typeId" v-for="item in gdType" :key="item.typeId"></el-option>
    </el-select>
  </el-form-item>
 
  <el-form-item label="补货数量:" prop="delivery">
     <div>
        <i class="el-icon-tickets"></i>
        <span class="qing">补货清单</span>
     </div>
  </el-form-item>
  
 <el-form-item label="运营人员" prop="mem">
    <el-select v-model="ruleForm.mem" placeholder="请选择">
    
    </el-select>
  </el-form-item>


  <el-form-item label="备注" prop="desc">
    <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注(不超过40字)"></el-input>
  </el-form-item>
 
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="queding" ref="valid">确 定</el-button>
  </span>
</el-dialog>

<!-- 工单配置模态框 -->
<el-dialog
  title="工单配置"
  :visible.sync="dialogVisible2"
  width="30%"
>
  <div class="pei">
     <span>补货警戒线:</span>
  <el-input v-model="input1" placeholder="请输入内容" >
  </el-input>
      <div class="right">
        <div class="top" @click="addgd">
          <i class="el-icon-arrow-up"></i>
        </div>
        <div class="down" @click="delgd">
          <i class="el-icon-arrow-down"></i>
        </div>
      </div>
  </div>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible2 = false">取 消</el-button>
    <el-button type="primary" @click="submitgdpz">确 定</el-button>
  </span>
</el-dialog>
<!-- 工单详情 待办-->
<el-dialog
  title="工单详情"
  :visible.sync="dialogVisible3"
  width="30%"
 >
 
  <div class="zhongjian">
        <div class="top">
            <div class="tu">
               <img src="@/assets/clock.png" alt="">
               <span>待办</span>
               <img src="@/assets/you.png" alt="" class="you">
            </div>
            
        </div>
      <div class="mid">
             <div class="mid1">
                  <div class="left">
                     <span class="s1">设备编号:  </span>
                     <span>{{bianhao}} </span>
                  </div>
                  <div class="right">
                     <span class="s2">创建日期:  </span>
                     <span> {{data}}</span>
                  </div>
             </div>

              <div class="mid1">
                  <div class="left">
                     <span class="s1">运营人员:   </span>
                     <span> {{ren}}</span>
                  </div>
                  <div class="right">
                     <span class="s2">工单类型:  </span>
                     <span>  {{gdlei}}</span>
                  </div>
             </div>

            <div class="mid1">
                  <div class="left">
                     <span class="s1">补货数量:   </span>
                     <a href="">补货详情</a>
                  </div>
                  <div class="right">
                     <span class="s2">工单方式:  </span>
                     <span> 手动</span>
                  </div>
             </div>
          <div class="mid1">
                  <div class="left">
                     <span class="s1">备注:   </span>
                    <span>{{beizhu}}</span>
                  </div>
                 
             </div>

      </div>


  </div>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="quxiaoGD">取消工单</el-button>
  </span>
</el-dialog>

<!-- 工单详情 取消 -->
<el-dialog
  title="工单详情"
  :visible.sync="dialogVisible4"
  width="30%"
 >
 
  <div class="zhongjian">
        <div class="top">
            <div class="tu">
               <img src="@/assets/quxiao.png" alt="">
               <span>取消</span>
               <img src="@/assets/quxiao1.png" alt="" class="you">
            </div>
            
        </div>
      <div class="mid">
             <div class="mid1">
                  <div class="left">
                     <span class="s1">设备编号:  </span>
                     <span>{{bianhao}} </span>
                  </div>
                  <div class="right">
                     <span class="s2">创建日期:  </span>
                     <span> {{data}}</span>
                  </div>
             </div>

              <div class="mid1">
                  <div class="left">
                     <span class="s1">运营人员:   </span>
                     <span> {{ren}}</span>
                  </div>
                  <div class="right">
                     <span class="s2">工单类型:  </span>
                     <span>  {{gdlei}}</span>
                  </div>
             </div>

            <div class="mid1">
                  <div class="left">
                     <span class="s1">补货数量:   </span>
                     <a href="">补货详情</a>
                  </div>
                  <div class="right">
                     <span class="s2">工单方式:  </span>
                     <span> 手动</span>
                  </div>
             </div>
          <div class="mid1">
                  <div class="left">
                     <span class="s1">备注:   </span>
                    <span>{{beizhu}}</span>
                  </div>
                   <div class="right">
                     <span class="s2">取消原因:  </span>
                     <span> </span>
                  </div>
             </div>

      </div>


  </div>

  <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="edit('edit')">重新创建</el-button>
  </span>
</el-dialog>

<!-- 工单详情 完成 -->
<el-dialog
  title="工单详情"
  :visible.sync="dialogVisible5"
  width="30%"
 >
 
  <div class="zhongjian">
        <div class="top">
            <div class="tu">
               <img src="@/assets/complete.png" alt="">
               <span>完成</span>
               <img src="@/assets/complete1.png" alt="" class="you">
            </div>
            
        </div>
      <div class="mid">
             <div class="mid1">
                  <div class="left">
                     <span class="s1">设备编号:  </span>
                     <span>{{bianhao}} </span>
                  </div>
                  <div class="right">
                     <span class="s2">创建日期:  </span>
                     <span> {{data}}</span>
                  </div>
             </div>

              <div class="mid1">
                  <div class="left">
                     <span class="s1">运营人员:   </span>
                     <span> {{ren}}</span>
                  </div>
                  <div class="right">
                     <span class="s2">工单类型:  </span>
                     <span>  {{gdlei}}</span>
                  </div>
             </div>

            <div class="mid1">
                  <div class="left">
                     <span class="s1">补货数量:   </span>
                     <a href="">补货详情</a>
                  </div>
                  <div class="right">
                     <span class="s2">工单方式:  </span>
                     <span> 手动</span>
                  </div>
             </div>
          <div class="mid1">
                  <div class="left">
                     <span class="s1">备注:   </span>
                    <span>{{beizhu}}</span>
                  </div>
                   <div class="right">
                     <span class="s2">取消原因:  </span>
                     <span> </span>
                  </div>
             </div>

      </div>


  </div>

</el-dialog>

  </div>
</template>

<script>
import {gdDetails1,gdType,gdxiang,gdcancel} from '@/api/auth'
export default {
 async created(){
   const res = await gdDetails1(this.pageIndex)
   console.log(res);
   this.list = res.currentPageRecords
   this.loading = false
 console.log(this.list);
 this.pageIndex =res.pageIndex
this.totalCount = res.totalCount
this.totalPage = res.totalPage
if(this.pageIndex === '1') {
   this.disabled = true
} 
  },

  data() {
    return {
      modelType:'',
      gdType:[],
      bianhao:'',
      data:'',
      ren:'',
      gdlei:'',
      buhuonum:'',
      gdmethod:'',
      quxiao:'',
      beizhu:'',
      form:{
         
          region: '',
          mem:'',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
      },
        text: '',
        loading:true,
      textarea: '',
      input: "",
      input1:100,
      select:null,
      isshow:true,
      list:[],
      disabled: false,
      totalCount:'',
      pageIndex:'1',
      totalPage:'',
      taskId:'',
      form1:{

      },
       dialogVisible: false,
        dialogVisible2: false,
        dialogVisible3:false,
         dialogVisible4:false,
           dialogVisible5:false,
       arr:[],
        ruleForm: {
           mem:'',
          name:'',
          region:'',
          innerCode: '',
          productType: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          createType:1
        },
          rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          productType:[
           { required: true, message: '请选择', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请选择', trigger: 'blur' }
          ],
        innerCode: [
            {  required: true, message: '请输入设备编号', trigger: 'blur' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写备注', trigger: 'blur' }
          ],
         mem:[
             { required: true, message: '请选择', trigger: 'blur' }
         ]
        }

    }
  },
    methods: {
      addgd(){
           this.input1++
      },
      delgd(){
        if(this.input1 ===1) return
         this.input1--
      },
      gdpeizhi(){
        this.dialogVisible2 = true
      },
     async submitgdpz(){
      const res = await gdDetails1(this.pageIndex)
      console.log(res)
       this.list = res.currentPageRecords
      this.dialogVisible2 = false
      },
      cancel(){
        console.log(1);
           this.$refs.ruleForm.resetFields()
           this.dialogVisible = false
           this.dialogVisible4 = false
      },
     async handleClick(row) {
      this.taskId = row.taskId
      const res = await gdxiang(row.taskId)
      console.log(res);
        console.log(row);
       
        if(row.taskStatusTypeEntity.statusName ==='待办') {
           this.bianhao = row.innerCode
           this.data = res.createTime
           this.ren = res.userName
           this.gdlei = row.taskType.typeName
           this.beizhu = res.desc
            this.dialogVisible3 = true
        }
        else if(row.taskStatusTypeEntity.statusName ==='取消'){
           this.bianhao = row.innerCode
           this.data = res.createTime
           this.ren = res.userName
           this.gdlei = row.taskType.typeName
           this.beizhu = res.desc
          this.dialogVisible4 = true
        }
         else if(row.taskStatusTypeEntity.statusName ==='完成'){
           this.bianhao = row.innerCode
           this.data = res.createTime
           this.ren = res.userName
           this.gdlei = row.taskType.typeName
           this.beizhu = res.desc
              this.dialogVisible5 = true
        }
      },
     async beforePage(){
 const res =  await gdDetails1()
       console.log(res);
       console.log(this.pageIndex);
       if(this.pageIndex ===0) return
       this.pageIndex--
         const res2 = await gdDetails1(this.pageIndex)
   console.log(res2);
   this.list = res2.currentPageRecords
     },
    async  nextPage(){
      if(this.select=== '1') {
          this.pageIndex++
          const res = await gdDetails1(this.pageIndex,this.select)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
      }
        if(this.select=== '2') {
          this.pageIndex++
          const res = await gdDetails1(this.pageIndex,this.select)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
      }
        if(this.select=== '3') {
          this.pageIndex++
          const res = await gdDetails1(this.pageIndex,this.select)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
      }
        if(this.select=== '4') {
          this.pageIndex++
          const res = await gdDetails1(this.pageIndex,this.select)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
      }
       const res =  await gdDetails1()
       console.log(res);
       console.log(this.pageIndex);
       this.pageIndex++
         const res1 = await gdDetails1(this.pageIndex)
   console.log(res1);
   this.list = res1.currentPageRecords
    
      },
        submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    async  stateSearch(){
        console.log(this.select,this.input);
      this.arr.push(this.list.find(item=>item.taskCode ==this.input))  
      this.list = this.arr
      this.loading = false
   
  if(this.select ==='0') {
             const res = await gdDetails1(this.pageIndex,this.select,this.input)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
               this.pageIndex =res.pageIndex
               this.totalCount = res.totalCount
               this.totalPage = res.totalPage
         }
        else if(this.select ==='1') {
             const res = await gdDetails1(this.pageIndex,this.select,this.input)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
               this.pageIndex =res.pageIndex
               this.totalCount = res.totalCount
                this.totalPage = res.totalPage
         }
            else if(this.select ==='2') {
             const res = await gdDetails1(this.pageIndex,this.select,this.input)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
               this.pageIndex =res.pageIndex
               this.totalCount = res.totalCount
                this.totalPage = res.totalPage
         }
            else if(this.select ==='3') {
             const res = await gdDetails1(this.pageIndex,this.select,this.input)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
               this.pageIndex =res.pageIndex
               this.totalCount = res.totalCount
                this.totalPage = res.totalPage
         }
            else if(this.select ==='4') {
             const res = await gdDetails1(this.pageIndex,this.select,this.input)
              console.log(res);
              console.log(this.select);
              this.list = res.currentPageRecords
               this.pageIndex =res.pageIndex
               this.totalCount = res.totalCount
                this.totalPage = res.totalPage
         }
        
      },
   
    async  xinjian(type){
      this.modelType = type
      if(this.modelType === 'xinzeng') {
    this.dialogVisible = true
        const res = await gdType()
        this.gdType = res
      }
       
      },
      edit(type){
          this.modelType = type
          if(this.modelType ==='edit') {
             this.ruleForm.innerCode = this.bianhao
             this.ruleForm.productType = this.gdlei
             this.ruleForm.mem = this.ren
             this.dialogVisible = true
          }
      },
     queding(){
        this.$refs.ruleForm.validate(async isok => {
          if(isok){
             this.dialogVisible = false
             this.$refs.ruleForm.resetFields()
           console.log(this.ruleForm);
          }
        })
      },
      quxiaoGD(){
          this.$confirm('取消工单后,将不能恢复,是否确认取消?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          console.log(1);
          console.log(this.taskId);
           const res = gdcancel(this.taskId)
           console.log(res);
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        this.dialogVisible3 = false
          ;
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
   
      }
    },
   watch:{
     list:{
      handler(){
      if(this.list.length ===0) {
         this.isshow = false
          console.log(this.isshow);
      } else this.isshow = true     
      }
     }
    }

}
</script>

<style lang="scss" scpoed>
.head {
    display: flex;
    height: 60px;
    background-color: #ffffff;
    line-height: 60px;
    width: 100%;
    margin-bottom: 20px;
    .button {
      height: 60px;
      width: 80px;

 
    }
    .right {
      display: flex;
      margin-right: 5px;
      width: 320px;
      height: 60px;
    }
    .right span {
      width: 100px;
    }
    .left {
      margin-right: 8px;
      margin-left: 20px;
      display: flex;
      width: 500px;
      height: 60px;
      .el-input{
        width: 50%;
      }
      span {
        width: 100px;
      }
    }
  }
 ::v-deep .maincontain {
  position: absolute;
  background-color: pink;
  top: 80px;
  left: 150px;
  width: 90%;
  height: 1000px;
  
  .body {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    background-color: #ffffff;
    .top {
      padding-left: 15px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      background-color:#ffffff;
      .el-button--primary {
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        border: none;
        text-align: center;
      }
      .el-button--warning{
        background-color: #fbf4f0;
        color: #6b635e;
        border: none;
      }
   
      
    }
  }
}

     ::v-deep .el-table__header{
  background-color: green;
} 
.foot{
  padding-left: 40px;
  padding-right: 40px;
   height: 100px;
   line-height: 100px;
   width: 100%;
   background-color: #ffffff;
   span {
    color: #dbe5ef;
   }
   .el-button--info {
    float: right;
    background-color: black;
    border: none;
    color: black;
    margin-right: 130px;
    margin-top: 40px;
   }
}

.mid {
  padding: 20px;
  height: 300px;
  .bianhao{
    display: flex;
    margin-bottom: 10px;
    line-height: 40px;
  }
 .el-input {
  margin-left: 10px;
  width: 400px;
 }
}
.el-input__inner{
  width: 430px;
}
.qing {
  color: #5f84ff;
}
.el-icon-tickets{
    color: #5f84ff;
}
.pei {
  display: flex;
  line-height: 40px;
  span {
    width: 100px;
  }
  .el-input__inner{
    width: 100%;
   
  }
}
 .pei{
   position: relative;
   .right{
    width: 40px;
    height: 40px;
    .top{
      border: 1px solid #e1e5ea;
      text-align: center;
      line-height: 20px;
      height: 20px;
      background-color: #f8fafd;
    }
    .down{
      height: 20px;
      text-align: center;
      line-height: 20px;
       border: 1px solid #e1e5ea;
        background-color: #f8fafd;
    }
   }
 }

 .zhongjian {
  .mid {
    .mid1{
      display: flex;
      margin-bottom: 20px;
        .lfet{
          .s1{
            margin-right: 20px;
           }
        }
        .right{
        margin-left: 100px;
        }
    }
  }
     .top{
        height: 50px;
       line-height: 50px;
        background-color: #f8f8f8;
        width: 500px;
        margin: 0 auto;


        .tu{
          position: relative;
         
          line-height: 50px;
            .you {
              position: absolute;
              right: 10px;
               top: -15px;
              height: 50px;
            }
                 img {
          margin-top: 13px;
          margin-left: 15px;
          margin-right: 15px;
        }
        span {
          bottom: -50px;
          position: absolute;
        margin-bottom: 50px;
        }
        }
      
     }
 }
</style>
